<template>
  <div class="recharge_title">SVIP</div>
  <div class="recharge_content">
    <div class="back">
      <p>{{ $t("svip_title") }}</p>
      <p class="nickname">
        {{ $t("honorific") }} {{ user_info.nickname }},{{
          $t("svip_money")
        }}：${{ user_info.charge_money }}
      </p>
      <p>
        {{ $t("Current_level") }}：<span>{{ user_info.level_name }}</span>
      </p>
      <p
        v-if="user_info.next_level.level_exper"
        class="nickname"
        style="margin-top: 20px"
      >
        {{ $t("svip_tip") }}<span id="next-rmb">${{ netxMoney }}</span>
        {{ $t("svip_tip2") }}
        <span id="next-lv"
          >{{ user_info.next_level.level_name }} {{ $t("vip") }}</span
        >
      </p>
      <div class="btn">
        <li
          @mousedown="mouseDown($event)"
          @mouseup="mouseUp($event)"
          :class="{ active: !btn_active }"
          @click="btn_active = 0"
        >
          <strong>{{ $t("svip_privilege") }}</strong>
        </li>
        <li
          @mousedown="mouseDown($event)"
          @mouseup="mouseUp($event)"
          :class="{ active: btn_active }"
          @click="btn_active = 1"
        >
          <strong>{{ $t("svip_Level_Details") }}</strong>
        </li>
      </div>
    </div>

    <div v-show="!btn_active">
      <div class="recharge_content_item">
        <dt class="flex">
          <strong>{{ $t("Diamond_level_privilege") }}</strong>
        </dt>
        <div class="recharge_content_item_content">
          <div v-if="lang == 'zh'">
            <p><em>1、</em><span>享有專屬 Facebook客服服務，針對您的問题提供快速解決方案。</span></p>
						<p><em>2、</em><span>享有優先知情權，第一時間掌握遊戲最新資訊，不错過任何重要更新。</span></p>
						<p><em>3、</em><span>赠送獨家專屬禮包（需私訊對應遊戲的官方FB領取）。</span></p>
          </div>

          <div v-if="lang == 'en'">
            <p>
              <em>1.</em><span>Enjoy exclusive Facebook customer service and provide quick solutions to your problems</span>
            </p>
            <p>
              <em>2.</em><span>Enjoy priority access to information, stay up-to-date with the latest game news, and never miss any important updates</span>
            </p>
            <p>
              <em>3.</em><span>Exclusive gift package (to be obtained through private message on the official FB of the corresponding game)</span>
            </p>
          </div>
        </div>
      </div>

      <!-- <div class="recharge_content_item">
                <dt class="flex">
                    <strong>如何成為SVIP</strong>
                </dt>
                <div class="recharge_content_item_content">
                    <p>
                    <p><strong>SVIP會員條件</strong></p>
                    <p><em>1、</em><span>平台VIP達到鑽石會員及以上。</span></p>
                    <p><em>2、</em><span>遊戲內達到超級會員。</span></p>
                    <p class="tip">任何一項即可成為SVIP超級會員，您的客服天使會主動聯繫您。</p>
                    </p>
                    <div id="sign" class="back-init vip-sign"></div>
                </div>
            </div> -->
    </div>

    <div class="level" id="vip_level" v-show="btn_active">
      <div class="left">
        <h3 style="padding: 20px 0">{{ $t("level") }}</h3>
        <ol>
          <li class="flex">
            <a>
              <img src="../../../assets/vip1.png" />
              {{ $t("Normal") }}
            </a>
          </li>
          <li class="flex">
            <a>
              <img src="../../../assets/vip2.png" />
              {{ $t("Silver") }}
            </a>
          </li>
          <li class="flex">
            <a>
              <img src="../../../assets/vip3.png" />
              {{ $t("Gold") }}
            </a>
          </li>
          <li class="flex">
            <a>
              <img src="../../../assets/vip2.png" />
              {{ $t("Platinum") }}
            </a>
          </li>
          <li class="flex">
            <a>
              <img src="../../../assets/vip4.png" />
              {{ $t("Diamond") }}
            </a>
          </li>
          <li class="flex">
            <a>
              <img src="../../../assets/vip5.png" />
              {{ $t("Champion") }}
            </a>
          </li>
          <li class="flex">
            <a>
              <img src="../../../assets/vip6.png" />
              {{ $t("Glory") }}
            </a>
          </li>
          <li class="flex">
            <a>
              <img src="../../../assets/vip7.png" />
              {{ $t("Super_Champion") }}
            </a>
          </li>
        </ol>
      </div>
      <div class="right">
        <h3>{{ $t("condition") }}</h3>
        <ol>
          <li v-for="item in level_list" :key="item.id">
            <a>${{ item.level_money }}</a>
          </li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useUserInfoStore } from "@/store/modules/user_info/index";
import axios from "@/utils/api";
const user_infoStore = useUserInfoStore();
const user_info = reactive(user_infoStore.userInfo);

let btn_active = ref(0);

const netxMoney = computed(() => {
  return (user_info.next_level.level_money - user_info.charge_money).toFixed(2);
});

const level_list = ref([]);
const getLevel_list = async () => {
  const list = await axios.get("/level_list");
  level_list.value = list;
};
getLevel_list();

const mouseDown = (event) => {
  event.target.parentElement.classList.add("down");
  event.target.classList.add("down");
  setTimeout(() => {
    event.target.parentElement.classList.remove("down");
    event.target.classList.remove("down");
  }, 500);
};
const mouseUp = (event) => {
  event.target.parentElement.classList.remove("down");
  event.target.classList.remove("down");
  setTimeout(() => {
    event.target.parentElement.classList.remove("down");
    event.target.classList.remove("down");
  }, 500);
};

const lang = ref("");
if (localStorage.getItem("lang") == "en") {
  lang.value = "en";
} else {
  lang.value = "zh";
}
</script>

<style lang="less" scoped>
.recharge_title {
  font-size: 25px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #fafafa;
  text-align: center;
}

.recharge_content {
  padding-bottom: 20px;

  .back {
    width: 80%;
    background-color: #ffba2b;
    padding: 30px 50px;
    border-radius: 20px 20px 0 0;
    margin-top: 30px;

    p {
      color: white;
      text-align: center;
      font-size: 25px;
      margin-bottom: 15px;
      font-weight: bold;

      span {
        color: #bd5c13;
      }
    }

    .btn {
      display: flex;
      margin-top: 30px;

      li {
        width: 280px;
        height: 60px;
        cursor: pointer;
        line-height: 60px;
        color: #808080;
        border-radius: 40px;
        margin-left: auto;
        background: -moz-linear-gradient(to right, #fff, #e4e4e4);
        background: -webkit-linear-gradient(to right, #fff, #e4e4e4);
        background: linear-gradient(to right, #fff, #e4e4e4);
        -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
        -webkit-transition: color 0.3s, background 0.3s, transform 0.5s;
        transition: color 0.3s, background 0.3s, transform 0.3s;
        text-align: center;
        list-style: none;
        font-size: 20px;
        float: left;
      }

      .active {
        background: #b4b4b4 !important;
        // pointer-events: none;
        cursor: default !important;
      }

      .down {
        transform: scale(0.8);
      }
      .up {
        transform: scale(1);
      }
    }
  }

  .recharge_content_item {
    strong,
    p {
      color: #8f6e32;
    }

    p {
      margin-top: 15px;
    }

    .flex {
      padding: 20px;
      color: #8f6e32;
      font-size: 30px;
      width: 85%;
    }

    .recharge_content_item_content {
      padding: 40px 50px;
      position: relative;
      border-radius: 8px;
      box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.3);
      width: 80%;
    }

    .tip {
      font-size: 20px;
    }

    .vip-sign {
      position: absolute;
      width: 100px;
      height: 100px;
      background-image: url(https://cdn.91easyplay.com/public/play/images/v.png);
      right: 40px;
      top: 55px;
    }
  }

  .level {
    display: flex;
    .left {
      width: 10%;
      margin-right: 35px;
      ol {
        margin-top: 5px;
      }
      li {
        width: 70px;
        margin-bottom: 35px;
        text-align: center;
        img {
          width: 56px;
          height: 51px;
        }
      }
    }
    .right {
      width: 75%;
      li {
        font-size: 28px;
        height: 80px;
        line-height: 80px;
        margin-bottom: 31px;
        background: #f0f0f0;
        color: #a9a9a9;
        text-align: center;
        position: relative;
        a {
          color: #000;
        }
      }
      li::after {
        content: "";
        position: absolute;
        left: -20px; /* 箭头相对于正方形的位置 */
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-right: 22px solid #f0f0f0;
      }
    }
    h3 {
      font-size: 24px;
      color: #8f6e32;
      text-align: center;
      padding: 20px;
    }
  }
}
</style>
